<template>
  <div>
    <!-- 
      v-model在不同表单元素上的使用
     -->
    <!-- 
       下拉框：v-model是绑定在select上的
      -->
    来自于：
    <select v-model="city">
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="上海">上海</option>
    </select>
    <hr />
    <!-- 
      复选框：
        情况一：
        v-model绑定的变量数据类型为"数组"的时候：vue变量和表单元素的value属性双向绑定在一起
        v-model绑定的变量数据类型为"非数组"的时候：vue变量和表单元素的checked属性双向绑定在一起
     -->
    爱好：<br />
    <input type="checkbox" v-model="hobby" value="敲代码" /> 敲代码
    <br />
    <input type="checkbox" id="test" v-model="hobby" value="学习vue" /> 学习vue
    <br />
    <input type="checkbox" v-model="hobby" value="干饭" /> 干饭

    <!-- 
      单选框
     -->
    <hr />
    性别：<input type="radio" v-model="gender" value="男" />男
    <input type="radio" v-model="gender" value="女" /> 女

    <!-- 
      多行文本域
     -->
    自我介绍：<textarea v-model="intro"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      city: "上海",
      hobby: [],
      // hobby: "",
      gender: "男",
      intro: "",
    };
  },
};
</script>

<style>
</style>